<template>
	<view class="container">
		<!-- 官方风格的顶部导航栏（优化状态栏适配） -->
		<view class="official-header" :style="{ paddingTop: statusBarHeight + 14 + 'px' }">
			<text class="page-title">简洁商城</text>
			<view class="search-box" @click="goToSearch">
				<uni-icons type="search" size="16" color="#999"></uni-icons>
				<text class="search-placeholder">搜索商品</text>
			</view>
		</view>
		
		<!-- 现代科技感的Banner -->
		<view class="banner-container">
			<swiper class="modern-banner" 
				:indicator-dots="false" 
				circular 
				autoplay 
				:interval="4000"
				@change="onBannerChange">
				<swiper-item v-for="(item, index) in banners" :key="index" @click="onBannerClick(item)">
					<view class="banner-item">
						<image :src="item.image" mode="aspectFill" class="banner-image"></image>
						<view class="banner-content">
							<view class="banner-tag">新品发布</view>
							<view class="banner-title">2023潮流新品</view>
							<view class="banner-btn">立即查看</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			
			<!-- 自定义指示器 -->
			<view class="custom-indicator">
				<view 
					v-for="(item, index) in banners" 
					:key="index" 
					class="indicator-dot"
					:class="{ active: currentBannerIndex === index }"
				></view>
			</view>
		</view>
		
		<!-- 重新设计的分类导航图标 -->
		<view class="category-section">
			<view class="nav-item" v-for="(item, index) in categoryIcons" :key="index" @click="navigateToCategory(item)">
				<view class="nav-icon-wrapper" :style="{ background: `linear-gradient(135deg, ${item.bgColor} 0%, ${getGradientColor(item.bgColor)} 100%)` }">
					<uni-icons :type="item.icon" size="22" color="#ffffff"></uni-icons>
				</view>
				<text class="nav-name">{{ item.name }}</text>
			</view>
		</view>
		
		<!-- 特惠专区 -->
		<view class="section deal-section">
			<view class="section-header">
				<view class="title-group">
					<text class="section-title">特惠专区</text>
					<text class="section-subtitle">限时优惠 · 品质保证</text>
				</view>
				<view class="section-more" @click="goToDeals">
					<text>查看更多</text>
					<uni-icons type="arrow-right" size="14" color="#999"></uni-icons>
				</view>
			</view>
			
			<scroll-view scroll-x class="deals-scroll" enhanced="true" show-scrollbar="false">
				<view class="deals-container">
					<view class="deal-item" v-for="(item, index) in deals" :key="index" @click="goToProduct(item.id)">
						<image :src="item.image" mode="aspectFill" class="deal-image"></image>
						<view class="discount-tag">{{Math.floor((item.originalPrice-item.price)/item.originalPrice*100)}}%</view>
						<view class="deal-info">
							<text class="deal-title">{{ item.title }}</text>
							<view class="deal-price-row">
								<text class="deal-price">¥{{ item.price }}</text>
								<text class="deal-original-price">¥{{ item.originalPrice }}</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- 新品上市 -->
		<view class="section">
			<view class="section-header">
				<view class="title-group">
					<text class="section-title">新品上市</text>
					<text class="section-subtitle">潮流先锋 · 品质之选</text>
				</view>
				<view class="section-more" @click="goToNewArrivals">
					<text>查看全部</text>
					<uni-icons type="arrow-right" size="14" color="#999"></uni-icons>
				</view>
			</view>
			
			<view class="new-arrivals-grid">
				<view class="new-item" v-for="(item, index) in newArrivals" :key="index" @click="goToProduct(item.id)">
					<image :src="item.image" mode="aspectFill" class="new-item-image"></image>
					<view class="new-item-info">
						<text class="new-item-title">{{ item.title }}</text>
						<text class="new-item-price">¥{{ item.price }}</text>
					</view>
				</view>
			</view>
			
			<!-- 加载更多状态提示 -->
			<view class="loading-more" v-if="isLoading">
				<uni-icons type="spinner-cycle" size="16" color="#999" class="loading-icon"></uni-icons>
				<text>加载中...</text>
			</view>
			
			<!-- 无更多数据提示 -->
			<view class="no-more" v-if="!hasMoreNewArrivals && newArrivals.length > 0">
				<text>— 没有更多商品了 —</text>
			</view>
		</view>
		
		<!-- 注释掉自定义tabbar -->
		<!-- <custom-tabbar currentPage="index"></custom-tabbar> -->
	</view>
</template>

<script>
	import CustomTabbar from '@/components/custom-tabbar.vue'
	
	export default {
		components: {
			CustomTabbar
		},
		data() {
			return {
				statusBarHeight: 0,
				currentBannerIndex: 0,
				banners: [
					{
						id: 1,
						image: 'https://images.unsplash.com/photo-1607082350899-7e105aa886ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8c2hvcHBpbmd8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=800&q=60',
						link: '/pages/activity/summer_sale'
					},
					{
						id: 2,
						image: 'https://images.unsplash.com/photo-1607083206968-13611e3d76db?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8ZmFzaGlvbiUyMHNob3BwaW5nfGVufDB8fDB8fHww&auto=format&fit=crop&w=800&q=60',
						link: '/pages/activity/new_season'
					},
					{
						id: 3,
						image: 'https://images.unsplash.com/photo-1483985988355-763728e1935b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8ZmFzaGlvbiUyMHNob3BwaW5nfGVufDB8fDB8fHww&auto=format&fit=crop&w=800&q=60',
						link: '/pages/activity/flash_sale'
					}
				],
				categoryIcons: [
					{ id: 'clothing', name: '服装', icon: 'shop', bgColor: '#3b7ff2', link: '/pages/category/clothing' },
					{ id: 'shoes', name: '鞋包', icon: 'cart', bgColor: '#32c5ff', link: '/pages/category/shoes' },
					{ id: 'beauty', name: '美妆', icon: 'star', bgColor: '#ff4f8d', link: '/pages/category/beauty' },
					{ id: 'digital', name: '数码', icon: 'phone', bgColor: '#6259ef', link: '/pages/category/digital' },
					{ id: 'home', name: '家居', icon: 'home', bgColor: '#58bc71', link: '/pages/category/home' }
				],
				deals: [
					{
						id: 201,
						image: 'https://images.unsplash.com/photo-1551488831-00ddcb6c6bd3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTd8fGZhc2hpb24lMjBkcmVzc3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60',
						title: '夏季连衣裙',
						price: 199,
						originalPrice: 399
					},
					{
						id: 202,
						image: 'https://images.unsplash.com/photo-1561052967-61fc91e48d79?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjR8fGZhc2hpb24lMjB0c2hpcnR8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60',
						title: '男士纯棉T恤',
						price: 89.9,
						originalPrice: 129
					},
					{
						id: 203,
						image: 'https://images.unsplash.com/photo-1600185365483-26d7a4cc7519?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8c25lYWtlcnN8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60',
						title: '运动休闲鞋',
						price: 299,
						originalPrice: 499
					},
					{
						id: 204,
						image: 'https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzR8fHN1bmdsYXNzZXN8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60',
						title: '时尚太阳镜',
						price: 159,
						originalPrice: 259
					}
				],
				newArrivals: [
					{
						id: 1,
						image: 'https://images.unsplash.com/photo-1604176424472-17cd740f74e9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDB8fGZhc2hpb24lMjBvdmVyc2l6ZWR8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60',
						title: '简约设计感宽松上衣',
						price: 399
					},
					{
						id: 2,
						image: 'https://img.alicdn.com/imgextra/i2/2473544917/O1CN012u5UqG1mC24lBi1Kn_!!2473544917.jpg',
						title: '高腰直筒休闲裤',
						price: 580
					},
					{
						id: 3,
						image: 'https://img.alicdn.com/bao/uploaded/i1/584927232/O1CN01ycRF8x23IJNu66Kk5_!!4611686018427381760-0-item_pic.jpg_500x500q90',
						title: '温暖羊毛针织衫',
						price: 458
					},
					{
						id: 4,
						image: 'https://images.unsplash.com/photo-1596755094514-f87e34085b2c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8ZmFzaGlvbiUyMGRyZXNzfGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60',
						title: '复古格纹连衣裙',
						price: 699
					},
					{
						id: 5,
						image: 'https://images.unsplash.com/photo-1608667508764-33cf0726b13a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fHNuZWFrZXJzfGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60',
						title: '轻盈舒适运动鞋',
						price: 489
					}
				],
				currentPage: 1, // 当前页码
				pageSize: 5, // 每页显示数量，修改为5，显示所有初始数据
				hasMoreNewArrivals: true, // 是否有更多数据
				isLoading: false, // 是否正在加载
				allNewArrivals: [] // 存储所有新品数据，用于分页
			}
		},
		onLoad() {
			// 获取状态栏高度
			this.getStatusBarHeight();
		},
		created() {
			// 初始化所有新品数据
			this.allNewArrivals = [...this.newArrivals];
			
			// 额外的新品数据用于加载更多
			const moreProducts = [
				{
					id: 6,
					image: 'https://images.unsplash.com/photo-1535043934128-cf0b28d52f95?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTd8fGZhc2hpb24lMjBiYWd8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60',
					title: '时尚手提单肩包',
					price: 799
				},
				{
					id: 7,
					image: 'https://images.unsplash.com/photo-1588850561407-ed78c282e89b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fGZhc2hpb24lMjBqYWNrZXR8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60',
					title: '休闲宽松外套',
					price: 689
				},
				{
					id: 8,
					image: 'https://images.unsplash.com/photo-1594633312681-425c7b97ccd1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3VuZ2xhc3Nlc3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60',
					title: '复古墨镜太阳镜',
					price: 299
				}
			];
			
			// 将额外数据添加到所有新品数据中
			this.allNewArrivals = [...this.allNewArrivals, ...moreProducts];
		},
		// 添加页面触底事件处理函数
		onReachBottom() {
			console.log("首页触底，加载更多新品");
			// 调用加载更多新品的方法
			this.loadMoreNewArrivals();
		},
		methods: {
			// 获取状态栏高度的方法
			getStatusBarHeight() {
				// 获取系统信息
				const systemInfo = uni.getSystemInfoSync();
				// 设置状态栏高度
				this.statusBarHeight = systemInfo.statusBarHeight || 0;
				console.log('状态栏高度:', this.statusBarHeight);
			},
			onBannerChange(e) {
				this.currentBannerIndex = e.detail.current;
			},
			onBannerClick(item) {
				uni.navigateTo({
					url: item.link
				});
			},
			navigateToCategory(item) {
				uni.navigateTo({
					url: item.link
				});
			},
			goToDeals() {
				uni.navigateTo({
					url: '/pages/deals/deals'
				});
			},
			goToNewArrivals() {
				uni.navigateTo({
					url: '/pages/new_arrivals/new_arrivals'
				});
			},
			goToProduct(productId) {
				uni.navigateTo({
					url: `/pages/product_detail/product_detail?id=${productId}`
				});
			},
			goToSearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				});
			},
			goToNotifications() {
				uni.navigateTo({
					url: '/pages/notifications/notifications'
				});
			},
			goToCategories() {
				uni.switchTab({
					url: '/pages/category/category'
				});
			},
			goToCart() {
				uni.switchTab({
					url: '/pages/cart/cart'
				});
			},
			goToMine() {
				uni.switchTab({
					url: '/pages/mine/mine'
				});
			},
			// 加载更多新品
			loadMoreNewArrivals() {
				if (this.isLoading || !this.hasMoreNewArrivals) return;
				
				this.isLoading = true;
				
				// 模拟请求延迟
				setTimeout(() => {
					// 假设每次加载2个新品
					const nextBatch = this.allNewArrivals.slice(this.newArrivals.length, this.newArrivals.length + 2);
					
					if (nextBatch.length > 0) {
						// 添加新数据到newArrivals
						this.newArrivals = [...this.newArrivals, ...nextBatch];
						
						// 检查是否还有更多数据
						if (this.newArrivals.length >= this.allNewArrivals.length) {
							this.hasMoreNewArrivals = false;
						}
					} else {
						this.hasMoreNewArrivals = false;
					}
					
					this.isLoading = false;
				}, 800);
			},
			// 生成渐变色的辅助函数
			getGradientColor(baseColor) {
				// 简单实现，实际可以根据色彩理论生成更好的渐变效果
				return this.lightenColor(baseColor, 20);
			},
			// 颜色变亮的辅助函数
			lightenColor(hex, percent) {
				// 将十六进制颜色转换为RGB
				let r = parseInt(hex.slice(1, 3), 16);
				let g = parseInt(hex.slice(3, 5), 16);
				let b = parseInt(hex.slice(5, 7), 16);
				
				// 增加亮度
				r = Math.min(255, r + Math.floor(percent / 100 * 255));
				g = Math.min(255, g + Math.floor(percent / 100 * 255));
				b = Math.min(255, b + Math.floor(percent / 100 * 255));
				
				// 转回十六进制
				return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
			}
		}
	}
</script>

<style lang="scss">
.container {
	background-color: #f8f8f8;
	min-height: 100vh;
	padding-bottom: 50px; // 为底部导航栏留出空间
}

// 官方风格的导航栏
.official-header {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 10px 16px 15px;
	background-color: #fff;
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
}

.page-title {
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	color: #000;
	margin-bottom: 12px;
}

.search-box {
	display: flex;
	align-items: center;
	width: 100%;
	height: 36px;
	background-color: #f2f2f2;
	border-radius: 18px;
	padding: 0 12px;
}

.search-placeholder {
	font-size: 13px;
	color: #999;
	margin-left: 6px;
}

// 现代科技感Banner
.banner-container {
	position: relative;
	margin: 15px 15px 25px;
}

.modern-banner {
	height: 180px;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.banner-item {
	position: relative;
	height: 100%;
	width: 100%;
	border-radius: 16px;
	overflow: hidden;
}

.banner-image {
	width: 100%;
	height: 100%;
	border-radius: 16px;
	transform: scale(1.05);
	transition: transform 0.5s ease;
}

.banner-content {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 20px;
	background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0) 100%);
}

.banner-tag {
	display: inline-block;
	font-size: 12px;
	color: #fff;
	background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
	padding: 4px 10px;
	border-radius: 4px;
	margin-bottom: 10px;
	width: fit-content;
}

.banner-title {
	font-size: 20px;
	font-weight: 600;
	color: #fff;
	margin-bottom: 15px;
	letter-spacing: 0.5px;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.banner-btn {
	display: flex;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.25);
	border: 1px solid rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(5px);
	padding: 6px 15px;
	border-radius: 20px;
	width: fit-content;
	font-size: 12px;
	color: #fff;
	font-weight: 500;
}

.custom-indicator {
	position: absolute;
	bottom: 15px;
	right: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10;
}

.indicator-dot {
	width: 6px;
	height: 6px;
	background-color: rgba(255, 255, 255, 0.4);
	border-radius: 3px;
	margin: 0 3px;
	transition: all 0.3s ease;
	
	&.active {
		width: 16px;
		background-color: #fff;
	}
}

// 重新设计的分类导航
.category-section {
	display: flex;
	justify-content: space-between;
	margin: 0 15px 20px;
	padding: 20px;
	background-color: #fff;
	border-radius: 16px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.nav-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.nav-icon-wrapper {
	width: 50px;
	height: 50px;
	border-radius: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 8px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	position: relative;
	overflow: hidden;
	
	&::before {
		content: '';
		position: absolute;
		top: -10px;
		left: -10px;
		right: -10px;
		bottom: -10px;
		background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.3) 100%);
		transform: rotate(45deg);
	}
}

.nav-name {
	font-size: 12px;
	color: #333;
	font-weight: 500;
}

// 重新设计的部分标题
.section {
	background-color: #fff;
	margin: 0 15px 20px;
	padding: 15px;
	border-radius: 16px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
}

.title-group {
	display: flex;
	flex-direction: column;
}

.section-title {
	font-size: 16px;
	font-weight: bold;
	color: #333;
	margin-bottom: 3px;
}

.section-subtitle {
	font-size: 11px;
	color: #999;
}

.section-more {
	display: flex;
	align-items: center;
	font-size: 12px;
	color: #999;
	background-color: #f5f5f5;
	padding: 5px 10px;
	border-radius: 15px;
}

// 特惠专区
.deals-scroll {
	width: 100%;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch; /* 允许iOS设备平滑滚动 */
}

.deals-container {
	display: inline-flex;
}

.deal-item {
	position: relative;
	flex-shrink: 0;
	width: 140px;
	margin-right: 15px;
	background-color: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.deal-image {
	width: 140px;
	height: 140px;
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
}

.discount-tag {
	position: absolute;
	top: 10px;
	right: 10px;
	background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
	color: white;
	padding: 3px 6px;
	border-radius: 3px;
	font-size: 10px;
	font-weight: bold;
}

.deal-info {
	padding: 10px;
}

.deal-title {
	font-size: 12px;
	color: #333;
	line-height: 1.3;
	height: 32px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
}

.deal-price-row {
	display: flex;
	align-items: baseline;
	margin-top: 6px;
}

.deal-price {
	font-size: 14px;
	font-weight: bold;
	color: #ff6b6b;
}

.deal-original-price {
	font-size: 10px;
	color: #999;
	margin-left: 5px;
	text-decoration: line-through;
}

// 新品上市
.new-arrivals-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 15px;
}

.new-item {
	background-color: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
}

.new-item-image {
	width: 100%;
	height: 160px;
	display: block;
}

.new-item-info {
	padding: 12px;
}

.new-item-title {
	font-size: 13px;
	color: #333;
	line-height: 1.3;
	height: 34px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
}

.new-item-price {
	font-size: 15px;
	font-weight: bold;
	color: #ff6b6b;
	margin-top: 5px;
	display: block;
}

// 加载更多状态提示
.loading-more {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px 0;
	color: #999;
	font-size: 13px;
}

.loading-icon {
	margin-right: 5px;
	animation: spin 1s linear infinite;
}

// 无更多数据提示
.no-more {
	text-align: center;
	color: #999;
	font-size: 12px;
	padding: 10px 0;
}

@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
</style>
